<template>
  <div>
    <div v-text="content"></div>
    <div v-html="content"></div>
    <button @click="myclick">按钮</button>
    <div v-if="num==1">星期一</div>
    <div v-else-if="num==2">星期二</div>
    <div v-else>其他</div>
    <div>{{status | cc}}</div>
    <div>{{reverse_msg}}</div>
    <div v-bind:style="{color:color}">今天星期天</div>
    <div>
      <table border="1">
        <tr v-for="(i,index) in slist">
          <td :class="{on:index%2===0,off:index%2 != 0}">{{index}}-----{{i}}</td>
        </tr>
      </table>
    </div>
    <div><input type="file" @change="upload"></div>
    <div></div>
  </div>
</template>

<script>
  export default {
    name: "Mytest",
    data() {
      return {
        content: '<h1>今天是周六</h1>',
        num: 2,
        status: 0,
        reverse: '今天星期六',
        color: 'blue',
        slist: ['张三', '李四', '王五', '赵六']
      }
    },
    methods: {
      myclick() {
        alert('按钮被点击了')
      },
      upload(e) {
        var cc = e.target.files[0];
        console.log(cc)
      },
      addgoods(){

      }
    },
    mounted() {
      // alert('mounted');
    },
    filters: {
      cc: function (c) {
        if (c === 0) {
          return '未支付'
        } else {
          return '已支付'
        }
      }
    },
    computed: {
      reverse_msg: function () {
        return this.reverse.split('').reverse().join("")
      }
    }
  }
</script>

<style scoped>
  .on {
    background: aqua;
  }

  .off {
    background: aquamarine;
  }
</style>
